<template>
  <div class="app-container">

    <IntroduceTip :value="3"></IntroduceTip>
    <div class="custom_card">
      <Tabs
        :list="tabs_list1"
        :column="7"
        :minWidth="200"
        :active="queryParams.type"
        @tabs_click="carBillsTypeChange"
        calss="menuTabs"
      ></Tabs>
    </div>
    <div class="custom_card_0">
      <MenuTabs
        v-if="queryParams.type == 1"
        key="MenuTabs2"
        :list="tabs_list2"
        name="业务类型"
        :labelWidth="100"
        :active="queryParams.typeDays"
        @tabs_click="carBillsDaysTypeChange"
      ></MenuTabs>
      <MenuTabs
        key="MenuTabs3"
        v-if="queryParams.type == 2"
        :list="tabs_list3"
        name="业务类型"
        :labelWidth="100"
        :active="queryParams.typeDays"
        @tabs_click="carBillsDaysTypeChange"
      ></MenuTabs>
      <MenuTabs
        key="MenuTabs4"
        v-if="queryParams.type == 3"
        :list="tabs_list4"
        name="业务类型"
        :labelWidth="100"
        :active="queryParams.typeDays"
        @tabs_click="carBillsDaysTypeChange"
      ></MenuTabs>
      <MenuTabs
        key="MenuTabs5"
        v-if="queryParams.type == 4"
        :list="tabs_list5"
        name="业务类型"
        :labelWidth="100"
        :active="queryParams.typeDays"
        @tabs_click="carBillsDaysTypeChange"
      ></MenuTabs>
    </div>
    <div class="custom_card_0" v-show="showSearch">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="订单编号" prop="bizNo">
          <el-input
            v-model="queryParams.bizNo"
            placeholder="请输入订单编号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="车牌号" prop="carNo">
          <el-input
            v-model="queryParams.carNo"
            placeholder="请输入车牌号"
            clearable
            size="small"
          />
        </el-form-item>

        <el-form-item label="订单来源" prop="orderSource">
          <el-select
            v-model="queryParams.orderSource"
            placeholder="请选择订单来源"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in dict.type.sys_order_source"
              :key="parseInt(dict.value)"
              :label="dict.label"
              :value="parseInt(dict.value)"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="订单标签" prop="labels">
          <el-select v-model="queryParams.labels" clearable >
            <template v-for="dict in labelList">
              <el-option :label="dict.name" :value="dict.id" :key="dict.id"></el-option>
            </template>
          </el-select>
        </el-form-item>

        <el-form-item label="客户信息" prop="memberKeys">
          <el-input
            v-model="queryParams.memberKeys"
            placeholder="请输入客户姓名/手机号"
            clearable
            size="small"
          />
        </el-form-item>

        <el-form-item label="车辆来源" prop="orderVehicleSource">
          <el-select
            v-model="queryParams.orderVehicleSource"
            placeholder="请选择车辆来源"
            clearable
            size="small"
          >
            <el-option label="自购车辆" :value="1"> </el-option>
            <el-option label="经租车辆" :value="2"> </el-option>
            <el-option label="托管车辆" :value="6"> </el-option>
            <el-option label="调入车辆" :value="3"> </el-option>
            <el-option label="借入车辆" :value="4"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="供应商" prop="orderSupplierId">
          <el-select
            v-model="queryParams.orderSupplierId"
            filterable
            placeholder="请选择供应商"
            clearable
            size="small"
          >
            <el-option v-for="item in supplierList" :key="item.id" :label="item.name"
                       :value="parseInt(item.id)"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="账单时间" prop="time">
          <el-date-picker
            clearable
            size="small"
            v-model="queryParams.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            placeholder="选择账单时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            :loading="exportLoading"
            @click="handleExport"
          >导出</el-button
          >
          <el-form-item>
            <el-tooltip placement="top" effect="dark">
              <div slot="content" style="font-size: 16px">
                订单违章押金、车辆押金的收支情况。财务人员可进行收款、确认收款及确认退款操作；也可在订单模块进行收款
              </div>
              <el-button type="text">功能说明&nbsp;<i class="el-icon-warning-outline"></i></el-button>
            </el-tooltip>
          </el-form-item>
        </el-form-item>
      </el-form>
    </div>
    <div class="custom_card">
      <!--      <el-row :gutter="10" class="mb10">
              <el-col :span="1.5">

              </el-col>
            </el-row>-->
      <!--      <span style="color: #2251c5">合计:{{totalCount}}元</span>-->
      <el-table v-loading="loading" :data="financialList" border v-if="!loading">
        <el-table-column
          label="账单类型"
          align="center"
          prop="receiveType"
          min-width="120"
          show-overflow-tooltip
          v-if="queryParams.type != 5"
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.receive_type"
              :value="scope.row.receiveType"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="账单日期"
          align="center"
          prop="payableTime"
          min-width="160"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="账单金额"
          align="center"
          prop="payableAmount"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            ¥{{ scope.row.payableAmount || 0}}
          </template>
        </el-table-column>
<!--        <el-table-column
          label="财务状态"
          align="center"
          prop="settlementStatus"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              v-if="scope.row.billType==1"
              :options="dict.type.settlement_Receive_status"
              :value="scope.row.settlementStatus"
            />
            <dict-tag
              v-if="scope.row.billType==2"
              :options="dict.type.settlement_status"
              :value="scope.row.settlementStatus"
            />
          </template>
        </el-table-column>-->

        <el-table-column
          label="收款账户"
          align="center"
          prop="paymentAccount"
          v-if="queryParams.type == 2"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope"> {{ scope.row.paymentAccount }} </template>
        </el-table-column>
        <el-table-column
          label="支付金额"
          align="center"
          prop="payAmount"
          min-width="140"
          show-overflow-tooltip
          v-if="queryParams.type == 2 || queryParams.type == 4"
        >
          <template slot-scope="scope"> ¥{{ scope.row.payAmount }} </template>
        </el-table-column>
        <!--     <el-table-column
               label="已付金额"
               align="center"
               prop="payAmount"
               v-if="queryParams.type == 2 || queryParams.type == 4"
               min-width="140"
               show-overflow-tooltip
             >
               <template slot-scope="scope"> ¥{{ scope.row.payAmount }} </template>
             </el-table-column>-->
        <el-table-column
          label="支付时间"
          align="center"
          prop="payTime"
          min-width="160"
          show-overflow-tooltip
          v-if="queryParams.type > 2 &&queryParams.type != 5"
        >
          <template slot-scope="scope"> {{ scope.row.payTime }} </template>
        </el-table-column>
        <el-table-column
          label="支付方式"
          align="center"
          prop="payWay"
          min-width="140"
          show-overflow-tooltip
          v-if="queryParams.type != 1&&queryParams.type != 3&&queryParams.type != 5"
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_pay_way"
              :value="scope.row.payWay"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="财务状态"
          align="center"
          prop="isConfirm"
          min-width="140"
          show-overflow-tooltip
          v-if="queryParams.type != 5"
        >
          <template slot-scope="scope">
            {{payStatus(scope.row.settlementStatus,scope.row.billType)}}<!--&&(queryParams.type == 2 || queryParams.type == 1)-->
              <span style="color: #0d65eb" v-if="scope.row.isConfirm==1&&(queryParams.type == 2 || queryParams.type == 1)"> / 已确认</span>
              <span style="color: red" v-if="scope.row.isConfirm==2&&(queryParams.type == 2 || queryParams.type == 1)"> / 未确认</span>
          </template>
        </el-table-column>
        <el-table-column
          label="实际收款时间"
          align="center"
          prop="confirmTime"
          v-if="queryParams.type == 2 || queryParams.type == 4"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope"> {{ scope.row.confirmTime }} </template>
        </el-table-column>
        <el-table-column
          label="订单编号"
          align="center"
          prop="orderNo"
          min-width="220"
          show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span style="font-size: 14px; color: #1890ff;cursor:pointer;" @click="orderDetail(row)">{{ row.orderNo }}</span>
        </template>
        </el-table-column>
        <el-table-column label="订单标签" align="center" min-width="200" show-overflow-tooltip prop="labels">
          <template slot-scope="{ row }">
            {{  formatLabel(row.labels)||'/' }}</template>
        </el-table-column>
        <el-table-column
          label="车牌号"
          align="center"
          prop="carNo"
          min-width="200"
          show-overflow-tooltip
        />

        <el-table-column
          label="承租人"
          align="center"
          prop="bizType"
          min-width="180"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.memberName }} :
            {{ scope.row.contactPhone }}
          </template>
        </el-table-column>
        <el-table-column
          label="取还信息"
          align="center"
          prop="bizType"
          min-width="240"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>
              <span>取：{{ scope.row.takeStoreName }}</span>
              <span v-if="!scope.row.alsoStoreName">   还：{{ scope.row.reserveAlsoStoreName }}</span>
              <span v-if="scope.row.alsoStoreName" >   还：{{ scope.row.alsoStoreName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="订单来源"
          align="center"
          prop="orderSource"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_order_source"
              :value="scope.row.orderSource"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="预定车型"
          align="center"
          prop="bizType"
          min-width="240"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-if="!scope.row.actualModelName">{{
                scope.row.modelName
              }}</span>
            <span v-if="scope.row.actualModelName">{{
                scope.row.actualModelName
              }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="租期/租金"
          align="center"
          prop="bizType"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.leaseDays }}{{ scope.row.useTimeType|useTimeType}}/¥{{ scope.row.rent }}
          </template>
        </el-table-column>
        <el-table-column
          label="订单状态"
          align="center"
          prop="orderStatus"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-tag
              :options="scope.row.orderType ==1 || scope.row.orderType ==2 ?  dict.type.sys_order_status: dict.type.chartered_bus_order_status"
              :value="scope.row.orderStatus"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="业务员"
          align="center"
          prop="userName"
          min-width="140"
          show-overflow-tooltip
        />


        <el-table-column
          label="经办人"
          align="center"
          prop="agent"
          v-if="queryParams.type == 2"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="scope"> {{ scope.row.agent}} </template>
        </el-table-column>

        <el-table-column
          label="操作"
          fixed="left"
          align="center"
          class-name="small-padding fixed-width"
          width="180"
          v-if="queryParams.type != 5"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              v-if="scope.row.isConfirm == 1"
              @click="handleDetails(scope.row)"
            >费用明细</el-button
            >
            <el-button
              size="mini"
              type="text"
              v-hasPermi="['bills:operation:receiveMoney']"
              v-if="scope.row.bizType == 1 && scope.row.settlementStatus != 3 && queryParams.type == 1"
              @click="payImmediately(scope.row.orderNo,scope.row.receiveType)"
            >费用缴纳</el-button>
            <el-button
              size="mini"
              type="text"
              v-hasPermi="['bills:operation:receiveMoney']"
              v-if="scope.row.bizType == 13 && scope.row.settlementStatus != 3 && queryParams.type == 1"
              @click="handleUpdate(scope.row)"
            >费用缴纳</el-button>
            <el-button
              size="mini"
              type="text"
              v-hasPermi="['bills:operation:receiveMoney']"
              v-if="scope.row.bizType == 17 && scope.row.settlementStatus != 3 && queryParams.type == 1"
              @click="handleUpdate(scope.row)"
            >费用缴纳</el-button>
            <el-button
              size="mini"
              type="text"
              style="color: red"
              v-hasPermi="['bills:operation:receiveMoney']"
              v-if="scope.row.settlementStatus ==3 &&scope.row.isConfirm == 2 && queryParams.type == 2"
              @click="confirmUpdate(scope.row)"
            >确认收款</el-button
            >
            <el-button
              size="mini"
              type="text"
              v-hasPermi="['bills:operation:receiveMoney']"
              v-if="scope.row.settlementStatus != 3 && queryParams.type == 3"
              @click="handleUpdate(scope.row)"
            >确认退款</el-button
            >
            <el-button
              size="mini"
              type="text"
              v-hasPermi="['bills:operation:receiveMoney']"
              v-if="scope.row.settlementStatus ==3 &&scope.row.isConfirm == 2 && queryParams.type == 3"
              @click="confirmUpdate(scope.row)"
            >确认退款</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 确认收款 -->
    <el-dialog
      :title="openTitle"
      :visible.sync="open"
      append-to-body
      :close-on-click-modal="false"
      width="1100px"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <el-row>
          <el-col :span="12" v-for="(item ,index) in form.costDescriptionList" :key="index">
            <el-form-item :label="item.name">
              {{item.value}}
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">
            <el-form-item label="账单时间" prop="payableTime">
              <el-input
                v-model="form.payableTime"
                disabled
                placeholder="请输入账单时间"
              />
            </el-form-item>
          </el-col>-->
          <el-col :span="12">
            <el-form-item label="应收金额" prop="payableAmount">
              {{form.payableAmount || 0}}元
<!--              <el-input v-model="form.payableAmount" disabled>
                <div slot="suffix" class="dw">元</div>
              </el-input>-->
            </el-form-item>
          </el-col>
        </el-row>
          <el-row>
          <el-col :span="12">
            <el-form-item label="支付方式" prop="payWay">
              <el-select
                v-model="form.payWay"
                placeholder="请选择支付方式"
                style="width: 100%"
                clearable
                size="small"
              >
                <el-option
                  v-for="dict in dict.type.sys_pay_way"
                  v-if="parseInt(dict.value) != 5"
                  :key="parseInt(dict.value)"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付时间" prop="payTime">
              <el-date-picker
                clearable
                size="small"
                v-model="form.payTime"
                style="width: 100%"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择支付时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付金额" prop="payAmount">
              <el-input v-model="form.payAmount" readonly>
                <div slot="suffix" class="dw">元</div>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="支付凭证">
              <ImageUpload
                @on-success="costImageSuccess"
                v-model="form.costImage"
                :limit="6"
                @on-remove="costImageRemove"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark" style="width: 100%">
              <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="submitLoading"
        >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!--财务确认-->
    <el-dialog
      :title="openConfirmTitle"
      :visible.sync="openConfirm"
      append-to-body
      :close-on-click-modal="false"
      width="1100px"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="收款方式">
              <dict-tag
                :options="dict.type.sys_pay_way"
                :value="form.payWay"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款账户" prop="paymentAccount">
              {{ form.paymentAccount }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款金额">
              {{ form.payAmount }}元
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款时间">
              {{ parseTime(form.payTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经办人" prop="agent">
              {{ form.agent }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              {{ form.remark }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="支付凭证" prop="costImage">
              <el-image
                v-for="(item, index) in form.urlList"
                :key="index"
                :src="getImgUrl(item)"
                :preview-src-list="[getImgUrl(item)]"
                style="width: 20%; margin-right: 15px"
                fit="contain"
              ></el-image>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="实际收款时间" prop="confirmTime">
              <el-date-picker
                clearable
                size="small"
                v-model="form.confirmTime"
                style="width: 50%"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择实际收款时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="收款凭证">
              <ImageUpload
                @on-success="confirmImageSuccess"
                v-model="form.confirmImage"
                :limit="3"
                @on-remove="confirmImageRemove"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="收款备注" prop="actualPaymentNote" style="width: 100%" >
              <el-input
                v-model="form.actualPaymentNote"
                type="textarea"
                placeholder="请输入收款备注"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="submitLoading"
        >确 定</el-button
        >
        <el-button @click="confirmCancel">取 消</el-button>
      </div>
    </el-dialog>
    <!--  费用明细  -->
    <el-dialog title="费用明细" :visible.sync="openDetails" append-to-body  width="1100px">
      <el-form :model="formDetails" label-width="120px">
        <el-row>
          <el-col :span="12" v-for="(item ,index) in formDetails.costDescriptionList"  :key="index">
            <el-form-item :label="item.name">
             {{item.value}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款方式">
              <dict-tag
                :options="dict.type.sys_pay_way"
                :value="formDetails.payWay"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款账户" prop="paymentAccount">
              {{ formDetails.paymentAccount }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款金额">
              {{ formDetails.payAmount }}元
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款时间">
              {{ parseTime(formDetails.payTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经办人" prop="agent" v-if="formDetails.bizType==1">
              {{ formDetails.agent }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              {{ formDetails.remark }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="支付凭证" prop="costImage">
              <el-image
                v-for="(item, index) in formDetails.urlList"
                :key="index"
                :src="getImgUrl(item)"
                :preview-src-list="[getImgUrl(item)]"
                style="width: 20%; margin-right: 15px"
                fit="contain"
              ></el-image>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formDetails.bizType==1">
            <el-form-item label="实际收款时间">
              {{ parseTime(formDetails.confirmTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="formDetails.bizType==1">
            <el-form-item label="收款凭证" prop="confirmUrl">
              <el-image
                v-for="(item, index) in formDetails.confirmUrlList"
                :key="index"
                :src="getImgUrl(item)"
                :preview-src-list="[getImgUrl(item)]"
                style="width: 20%; margin-right: 15px"
                fit="contain"
              ></el-image>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formDetails.bizType==1">
            <el-form-item label="收款备注" prop="actualPaymentNote">
              {{ formDetails.actualPaymentNote }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDetails">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listOrderFinancial,
    getFinancial,
    receiveMoney,
    addFinancial,
    handleOrderExport,
    selectOrderBillFinancialCount,
    selectOrderBillFinancialCount1,
  } from '@/api/bills/financial'
  import { userlist } from '@/api/system/user'
  import Tabs from '@/components/custom/tabs.vue'
  import MenuTabs from '@/components/custom/menuTabs.vue'
  import {getAllLabel} from "@/api/label/label";
  import {getSupplierList} from "@/api/supplier/supplier";
  export default {
    name: 'Operation_car',
    dicts: [
      'sys_pay_way',
      'settlement_way',
      'receive_type',
      'sys_order_status',
      'secondments_state',
      'chartered_bus_order_status',
      'settlement_Receive_status',
      'settlement_status',
      'pay_biz_type',
      'bill_type',
      'sys_order_source',
    ],
    data() {
      return {
        showTip:true,
        // 遮罩层
        loading: true,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 财务账单表格数据
        financialList: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        openConfirm: false,
        totalCount:0,
        openTitle:'财务收款',
        openConfirmTitle:'财务收款',
        confirmTitle:'',
        // 查询参数
        queryParams: {
          isRent: 2,
          pageNum: 1,
          pageSize: 10,
          orderSource:null,
          bizType: null,
          bizNo: null,
          billType: null,
          payableTime: null,
          payableAmount: null,
          payTime: null,
          payAmount: null,
          settlementStatus: null,
          payWay: null,
          deptId: null,
          carNo: null,
          tenantId: null,
          time: null,
          startTime: null,
          endTime: null,
          createBy: null,
          type: 1,
          memberKeys: null,
          orderVehicleSource: null,
          orderSupplierId: null,
          typeDays: 1,
        },
        // 表单参数
        form: {},

        labelList: [],
        supplierList: [],
        // 表单校验
        rules: {
          payWay: [
            { required: true, message: '支付方式不能为空', trigger: 'blur' },
          ],
          payTime: [
            { required: true, message: '支付时间不能为空', trigger: 'blur' },
          ],
          confirmTime: [
            { required: true, message: '实际收款时间不能为空', trigger: 'blur' },
          ],
          payAmount: [
            { message: '支出费用不能为空', trigger: 'change' },
            {
              pattern: /^(([1-9][0-9]*)|(([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2})))$/,
              message: '费用输入有误',
              trigger: 'blur',
            },
          ],
        },
        //经办人
        sysUserList: [],
        openDetails: false,
        formDetails: {},
        tabs_list1: [
          { key: '1', name: '应收账单', count: '￥0' },
          { key: '2', name: '已收账单', count: '￥0' },
          { key: '5', name: '待结算账单', count: '￥0' },
          { key: '3', name: '应退账单', count: '￥0' },
          { key: '4', name: '已退账单', count: '￥0' },
        ],
        tabs_list2: [
          { key: '1', name: '全部', count: '￥0' },
          { key: '2', name: '今日', count: '￥0' },
          { key: '3', name: '本周', count: '￥0' },
          { key: '4', name: '本月', count: '￥0' },
        ],
        tabs_list3: [
          { key: '1', name: '全部', count: '￥0' },
          { key: '2', name: '今日', count: '￥0' },
          { key: '3', name: '本周', count: '￥0' },
          { key: '4', name: '本月', count: '￥0' },
        ],
        tabs_list4: [
          { key: '1', name: '全部', count: '￥0' },
          { key: '6', name: '今日', count: '￥0' },
          { key: '7', name: '本周', count: '￥0' },
          { key: '8', name: '本月', count: '￥0' },
        ],
        tabs_list5: [
          { key: '5', name: '全部', count: '￥0' },
          { key: '6', name: '今日', count: '￥0' },
          { key: '7', name: '本周', count: '￥0' },
          { key: '8', name: '本月', count: '￥0' },
        ],
        maxAmount: 0,
        submitLoading: false,
      }
    },
    components: {
      Tabs,
      MenuTabs,
    },
    created() {
      this.carBillsTypeChange(1)
      this.getUserList()
      this.getAllLabel()
      this.getSupplierList()
      this.getSelectOrderBillFinancialCount();
    },
    activated() {
     this.getList()
    },
    methods: {
      closeTip(){
        this.showTip = false;
      },
      payStatus(val,type){
        let str;
        if(type==1){
          // this.dict.type.settlement_Receive_status.forEach(i=>{
          //   if(parseInt(i.value)===parseInt(val)){
          //     str= i.label;
          //   }
          // })
          str= parseInt(val)=== 1 ?"未支付":"已支付";
        }else{
          this.dict.type.settlement_status.forEach(i=>{
            if(parseInt(i.value)===parseInt(val)){
              str= i.label;
            }
          })
        }
      return str;
      },
      cancelDetails() {
        this.openDetails = false
      },
      // 删除图片
      costImageRemove(file) {
        this.form.costImage = null
      },
      confirmImageRemove(file) {
        this.form.confirmImage = null
      },
      // 上传成功回调
      costImageSuccess(res) {
        this.form.costImage = res.fileName
        this.$refs['form'].validateField('costImage')
      },
      confirmImageSuccess(res) {
        this.form.confirmImage = res.fileName
        this.$refs['form'].validateField('confirmImage')
      },
      //统计
      getSelectOrderBillFinancialCount1() {
        selectOrderBillFinancialCount1(this.queryParams).then((response) => {
          let carBill = response.data
          if(this.queryParams.type==1){
            this.tabs_list2 = [
              { key: '1', name: '全部', count: '￥' + carBill.receivable },
              { key: '2', name: '今日', count: '￥' + carBill.receivableDay },
              { key: '3', name: '本周', count: '￥' + carBill.receivableWeeks },
              { key: '4', name: '本月', count: '￥' + carBill.receivableMonth },
            ]
          }


          if(this.queryParams.type==2){
            this.tabs_list3 = [
              { key: '1', name: '全部', count: '￥' + carBill.toReceive },
              { key: '2', name: '今日', count: '￥' + carBill.toReceiveDay },
              { key: '3', name: '本周', count: '￥' + carBill.toReceiveWeeks },
              { key: '4', name: '本月', count: '￥' + carBill.toReceiveMonth },
            ]
          }
          if(this.queryParams.type==3){
            this.tabs_list4 = [
              { key: '1', name: '全部', count: '￥' + carBill.payable },
              { key: '6', name: '今日', count: '￥' + carBill.payableDay },
              { key: '7', name: '本周', count: '￥' + carBill.payableWeeks },
              { key: '8', name: '本月', count: '￥' + carBill.payableMonth },
            ]
          }
          if(this.queryParams.type==4){
            this.tabs_list5 = [
              { key: '5', name: '全部', count: '￥' + carBill.toPayable },
              { key: '6', name: '今日', count: '￥' + carBill.toPayableDay },
              { key: '7', name: '本周', count: '￥' + carBill.toPayableWeeks },
              { key: '8', name: '本月', count: '￥' + carBill.toPayableMonth },
            ]
          }
        })
      },
      getSelectOrderBillFinancialCount() {
        selectOrderBillFinancialCount(this.queryParams).then((response) => {
          let carBill = response.data
          this.tabs_list1 = [
            { key: '1', name: '应收账单', count: '￥' + carBill.receivable },
            { key: '2', name: '已收账单', count: '￥' + carBill.toReceive },
            { key: '5', name: '待结算账单', count: '￥' + carBill.toSettled },
            { key: '3', name: '应退账单', count: '￥' + carBill.payable },
            { key: '4', name: '已退账单', count: '￥' + carBill.toPayable },
          ]
        })
      },
      payImmediately(orderNo,type) {
        // this.$router.push({
        //   path: '/orderBasic/orderPayRecord',
        //   query: { orderNo: orderNo, types: type }
        // })
        this.$router.push({ name: 'OrderPayRecord', params: { orderNo: orderNo, types: type+'',source:"2" } })
      },
      //经办人
      getUserList() {
        userlist({}).then((response) => {
          this.sysUserList = response.data
        })
      },
      carBillsTypeChange(val) {
        //this.resetQuery()
        this.resetForm('queryForm')
        this.queryParams.time = ''
        this.queryParams.startTime = null
        this.queryParams.endTime = null
        this.queryParams.type = val
        if (val == 4) {
          this.queryParams.typeDays = 5
        } else {
          this.queryParams.typeDays =1
        }
        this.queryParams.pageNum = 1
        this.queryParams.isRent = 2
        this.getList()
      },
      //子统计
      carBillsDaysTypeChange(val) {
        this.queryParams.pageNum = 1
        this.queryParams.typeDays = val
        this.getList()
      },
      /** 查询财务账单列表 */
      getList() {
        this.loading = true
        listOrderFinancial(this.queryParams).then((response) => {
          this.financialList = response.rows
          this.total = response.total
          this.loading = false
          this.getSelectOrderBillFinancialCount1();
        })
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      confirmCancel() {
        this.openConfirm = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          bizType: null,
          bizNo: null,
          billType: null,
          payableTime: null,
          payableAmount: null,
          payTime: null,
          payAmount: null,
          settlementStatus: 0,
          payWay: null,
          deptId: null,
          tenantId: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          costImage: null,
          confirmImage: null,
          urlList: [],
          confirmUrlList:[],
          confirmTime:null,
          actualPaymentNote:null
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        if (this.queryParams.time) {
          this.queryParams.startTime = this.parseTime(
            this.queryParams.time[0],
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
          this.queryParams.endTime = this.parseTime(
            this.queryParams.time[1],
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
        }
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.queryParams.time = ''
        this.queryParams.isRent = 2
        this.queryParams.startTime = null
        this.queryParams.endTime = null
        this.handleQuery()
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset()
        this.open = true
        this.openTitle = '财务收款'
      },
      /** 订单详情按钮 */
      orderDetail(row) {
        this.nowOrderNo = row.orderNo
        switch (row.orderType){
          case 1:
            this.$router.push({
              path: '/orderBasic/detail',
              query: { orderNo: row.orderNo }
            })
                break;
          case 2:
            this.$router.push({
              path: '/longBasic/detail',
              query: { orderNo: row.orderNo }
            })
                break;
          case 3:
            this.$router.push({
              path: '/charteredBus/order/detail',
              query: { orderNo: row.orderNo }
            })
            break;
        }

      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()
        const id = row.id || this.ids
        getFinancial(id).then((response) => {
          this.form = response.data
          if (this.form.payAmount == null) {
            this.form.payAmount = 0
          }
          this.form.payAmount = this.form.payableAmount - this.form.payAmount
          this.form.payAmount = this.form.payAmount < 0 ? 0 : this.form.payAmount
          this.maxAmount = this.form.payAmount
          this.form.payAmount = parseFloat(this.form.payAmount).toFixed(2)
          this.form.payTime = this.parseTime(
            new Date(),
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
          this.form.urlList = []
          this.open = true
          if(this.queryParams.type == 1 ){
            this.openTitle = '财务收款'
          }
          if(this.queryParams.type == 3 ){
            this.openTitle = '财务退款'
          }
          this.title = '修改财务账单'
        })
      },
      //财务确认
      confirmUpdate(row) {
        this.reset()
        const id = row.id || this.ids
        getFinancial(id).then((response) => {
          this.form = response.data
          this.form.confirmTime = this.parseTime(
            new Date(),
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
          this.form.confirmUrlList = []
          this.openConfirm = true
          if(this.queryParams.type == 1 ){
            this.openConfirmTitle = '财务收款'
          }
          if(this.queryParams.type == 3 ){
            this.openConfirmTitle = '财务退款'
          }
          this.confirmTitle = '修改财务账单'
        })
      },
      getSupplierList(){
        getSupplierList(99999).then((response) => {
          this.supplierList = response.data
        })
      },
      getAllLabel(){
        getAllLabel().then((response) => {
          this.labelList = response.data
        })
      },
      formatLabel(labels){
        return this.labelList.filter(item=>{
          return labels?.split(",").indexOf(item.id+"")>=0
        }).map(i=>{
          return i.name
        }).join(",")
      },
      //账单详情
      handleDetails(row) {
        this.openDetails = true
        getFinancial(row.id).then((response) => {
          this.formDetails = response.data
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.submitLoading = true
            if (this.form.costImage) {
              this.form.urlList = this.form.costImage.split(',')
            }
            if (this.form.confirmImage) {
              this.form.confirmUrlList = this.form.confirmImage.split(',')
            }
            if (this.form.id != null) {
              receiveMoney(this.form)
                .then((response) => {
                  this.$modal.msgSuccess('操作成功')
                  this.open = false
                  this.openConfirm = false
                  //this.carBillsTypeChange(1);
                  this.getSelectOrderBillFinancialCount()
                  this.getList()
                  this.submitLoading = false
                })
                .catch((item) => {
                  this.submitLoading = false
                })
            } else {
              addFinancial(this.form).then((response) => {
                this.$modal.msgSuccess('操作成功')
                this.open = false
                this.carBillsTypeChange(1)
                this.submitLoading = false
              })
            }
          }
        })
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams
        this.$modal
          .confirm('是否确认导出所有财务账单数据项？')
          .then(() => {
            this.exportLoading = true
            return handleOrderExport(queryParams)
          })
          .then((response) => {
            this.$download.name(response.msg)
            this.exportLoading = false
          })
          .catch(() => {})
      },
    },
  }
</script>
<style scoped lang="scss">
  .dw {
    margin-right: 8px;
  }
</style>
